<!DOCTYPE html>
<html>

	<head><link rel="shortcut icon" href="http://likexia.gitee.io/tools/lib/img/h5.png" type="image/x-icon">
		<meta charset="utf-8">
		<!--自动刷新，1s=1-->
		<!--<META http-equiv="Refresh" content="3">-->
		<!--<meta http-equiv="X-UA-Compatible" content="IE=7" />-->
		<meta http-equiv="X-UA-Compatible" cotent="IE=edge,chrome=1" />
		<!--禁止缓存-测试时用-->
		<meta http-equiv="expires" content="0">
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<!--禁止缓存-测试时用-->
		<!--禁止禁止识别电话号码和邮件-->
		<meta name="format-detection" content="telephone=no, email=no" />
		<!--禁止禁止识别电话号码和邮件-->
		<!--x5内核浏览器包括：QQ浏览器，qq,微信内置的浏览器（ 竖屏显示、以及全屏显示）-->
		<meta name="x5-orientation" content="portrait" />
		<meta name="x5-fullscreen" content="true" />
		<!--x5内核浏览器包括：QQ浏览器，qq,微信内置的浏览器（ 竖屏显示、以及全屏显示）-->
		<!--UC浏览器竖屏显示和全屏显示-->
		<meta name="screen-orientation" content="portrait">
		<meta name="full-screen" content="yes">
		<!--UC浏览器竖屏显示和全屏显示-->
		<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<title>穿越星空</title>
		<style type="text/css">
html,
body {
  height: 400px;
  width: 100%;
  margin: 0;
  background: rgba(0, 10, 20, 1)
}

#space {
    width: 100%;
    height: 100%;
    z-index: 999;
    position: fixed;
}

#warp {
  position: absolute;
  z-index: 99999;
  width: 80px;
  height: 80px;
  line-height: 80px;
  top: 50%;
  left: 50%;
  margin: -40px 0 0 -40px;
  color: rgba(255, 255, 255, 1);
  text-align: center;
  letter-spacing: 2px;
  font-size: 1.2rem;
  text-decoration: none;
  font-family: cursive;
}
		</style>
	</head>

	<body>
  <canvas id="space">
  </canvas>
  <a href="#" id="warp">
    THEASK
  </a>
  <script type="text/javascript">
  	window.requestAnimFrame = (function() {
  return window.requestAnimationFrame
})();
var canvas = document.getElementById("space");
var c = canvas.getContext("2d");

var numStars = 1900;
var radius = '0.' + Math.floor(Math.random() * 9) + 1;
var focalLength = canvas.width * 2;
var warp = 0;
var centerX, centerY;

var stars = [],
star;
var i;

var animate = true;

initializeStars();

function executeFrame() {

  if (animate) requestAnimFrame(executeFrame);
  moveStars();
  drawStars();
}

function initializeStars() {
  centerX = canvas.width / 2;
  centerY = canvas.height / 2;

  stars = [];
  for (i = 0; i < numStars; i++) {
    star = {
      x: Math.random() * canvas.width,
      y: Math.random() * canvas.height,
      z: Math.random() * canvas.width,
      o: '0.' + Math.floor(Math.random() * 99) + 1
    };
    stars.push(star);
  }
}

function moveStars() {
  for (i = 0; i < numStars; i++) {
    star = stars[i];
    star.z--;

    if (star.z <= 0) {
      star.z = canvas.width;
    }
  }
}

function drawStars() {
  var pixelX, pixelY, pixelRadius;

  if (canvas.width != window.innerWidth || canvas.width != window.innerWidth) {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    initializeStars();
  }
  if (warp == 0) {
    c.fillStyle = "rgba(0,10,20,1)";
    c.fillRect(0, 0, canvas.width, canvas.height);
  }
  c.fillStyle = "rgba(255, 255, 255, " + radius + ")";
  for (i = 0; i < numStars; i++) {
    star = stars[i];

    pixelX = (star.x - centerX) * (focalLength / star.z);
    pixelX += centerX;
    pixelY = (star.y - centerY) * (focalLength / star.z);
    pixelY += centerY;
    pixelRadius = 1 * (focalLength / star.z);

    c.fillRect(pixelX, pixelY, pixelRadius, pixelRadius);
    c.fillStyle = "rgba(255, 255, 255, " + star.o + ")";
  }
}

executeFrame();
  </script>
	</body>

</html>